<template>
    <div class="login">
        <div class="login-image">
            <el-image :src="background" fit="fill"></el-image>
        </div>
        <div class="login-model">
            <div>扫码登陆</div>
            <div>请使用飞书移动端扫描二维码</div>
            <div id="login_container"></div>
            选择飞书：
            <el-select v-model="orgCode" placeholder="选择飞书" style="width: 250px;" @change="orgChangeBtn" :disabled="!!type">
                <el-option v-for="(item,index) in orgs" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
import {
    postApiApilogin,
    postAdminPricingSetNologin,
    postAdminPricingGet_FeshiJSAPI,
} from "@/api";
import { setStore } from "@/utils/localStorage.js";
import background from "@/assets/images/login.png";
export default {
    data() {
        return {
            background,
            loading: false,
            type: "",
            form: {
                name: "",
                password: "",
            },
            rules: {
                name: [{ required: true, message: "请输入账号", trigger: "blur" }],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
            },

            orgCode: "cli_a2c94c4c6ffbd00b",
            orgs: [
                {
                    type: "kz",
                    value: "cli_a2984ab27e22500e",
                    label: "年年有余 (浙江)文化科技有限公司",
                },
                {
                    type: "mz",
                    value: "cli_a4e85e1fd738900b",
                    label: "杭州妙哉文化有限公司",
                },
                {
                    type: "yx",
                    value: "cli_a417a82b037e900e",
                    label: "杭州著风和雨文化科技有限公司",
                },
                {
                    type: "xm",
                    value: "cli_a694f6fb157b500e",
                    label: "杭州亦亦上弦文化科技有限公司",
                },
                {
                    type: "js",
                    value: "cli_a61a3f5797e9100d",
                    label: "庄周梦蝶（杭州）文化有限公司",
                }
            ],
        };
    },
    beforeMount(){
        let type = this.$route.query.type
        if (type) {
            this.type = type
        }
    },
    mounted() {
        let type = !!this.type ? this.type : "kz";
        console.log(type);
        for(let item of this.orgs){
            if(type == item.type){
                this.orgCode = item.value;
                this.QRCode({ appid: item.value, is_subject: type});
            }
        }
    },
    methods: {
        orgChangeBtn() {
            document.getElementById("login_container").innerHTML = "";
            for(let item of this.orgs){
                if(item.value == this.orgCode){
                    this.QRCode({ appid: item.value, is_subject: item.type});
                }
            }
        },
        QRCode(obj) {
            let redirect_uri = `https%3A%2F%2Fssy.13yu.com%2Fdist%2F%23%2Floading`;
            //redirect_uri = `http%3A%2F%2Flocalhost%3A8081%2F%23%2Floading`;
            //redirect_uri = `http%3A%2F%2Ftest.13yu.com%2Fdist%2F%23%2Floading`;
            var QRLoginObj = QRLogin({
                id: "login_container",
                goto: `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${obj.appid}&redirect_uri=${redirect_uri}&response_type=code&state=${obj.is_subject}`,
                width: "300",
                height: "300",
                style: "border:none"
            });
            var handleMessage = function (event) {
                console.log("event", event);
                var origin = event.origin;
                // 使用 matchOrigin 方法来判断 message 来自页面的url是否合法
                if (QRLoginObj.matchOrigin(origin)) {
                    var loginTmpCode = event.data;
                    // 在授权页面地址上拼接上参数 tmp_code，并跳转
                    window.location.href = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${obj.appid}&redirect_uri=${redirect_uri}&response_type=code&state=${obj.is_subject}&tmp_code=${loginTmpCode}`;
                }
            };
            if (typeof window.addEventListener != "undefined") {
                window.addEventListener("message", handleMessage, false);
            } else if (typeof window.attachEvent != "undefined") {
                window.attachEvent("onmessage", handleMessage);
            }
            // if (!localStorage.getItem("userinfo")) {
            //     // this.fsJssdk();
            // } else {
            //     this.$router.push({ name: "Container" });
            // }
        },
        /*
                fslogin(code) {
                    debugger
                    let obj = {
                        code,
                    };
                    postAdminPricingSetNologin(obj).then((res) => {
                        setStore("userinfo", res.data);
                        this.$store.commit("mutationsNavMenuList", res.data.roletop);
                        let qxobj = {};
                        let qx = res.data.roletop[0].list[0].qx;
                        qx.forEach((element) => {
                            qxobj[element.rolekey] = 1;
                        });
                        qxobj = JSON.stringify(qxobj);
                        this.$router.push({
                            name: res.data.roletop[0].list[0].unique,
                            query: { qxobj },
                        });
                        this.loading = false;
                    }).catch((err) => {
                        let data = JSON.stringify(err);
                        alert("err" + data + "code:" + code);
                    });
                },
                // 飞书jssdk
                async fsJssdk() {
                    debugger
                    let that = this;
                    let obj = {
                        url: "https://ssy.13yu.com/dist/"
                    };
                    console.log(postAdminPricingGet_FeshiJSAPI(obj));
                    window.h5sdk.ready(async () => {
                        let data = await postAdminPricingGet_FeshiJSAPI(obj).then(
                            (res) => res.data
                        );

                        window.h5sdk.config({
                            appId: data.appId, // 必填，应用ID
                            timestamp: data.timeStamp, // 必填，生成签名的时间戳，毫秒级
                            nonceStr: data.nonceStr, // 必填，生成签名的随机串
                            signature: data.signature, // 必填，签名
                            jsApiList: [
                                // 当前开发文档中的网页应用API 均无需填写该字段
                            ],
                            onSuccess: function (result) {
                                tt.requestAuthCode({
                                    appId: data.appId,
                                    success: (info) => {
                                        that.fslogin(info.code);
                                    },
                                    fail: (error) => {
                                        let str = JSON.stringify(error);
                                        that.$message.warning(str);
                                    },
                                });
                                // 成功回调，可以在成功之后使用 tt.xx jsapi
                            },
                            onFail: function (error) {
                                // 失败回调
                                let str = JSON.stringify(error);
                                that.$message.warning(str);
                            },
                        });
                        //  lark.ready参数为回调函数，在环境准备就绪时触发
                    });
                },
                submitForm() {
                    debugger
                    this.loading = true;
                    let form = this.form;
                    this.$refs["form"].validate((valid) => {
                        if (valid) {
                            // postApiApilogin(form)
                            //   .then((res) => {
                            //     setStore("userinfo", res.data);
                            //     this.$router.push({ name: "Container" });
                            //   })
                            //   .catch((err) => {
                            //     this.$message.warning(err.msg);
                            //     this.loading = false;
                            //   });
                            postApiApilogin(form)
                                .then((res) => {
                                    setStore("userinfo", res.data);
                                    this.$store.commit("mutationsNavMenuList", res.data.roletop);
                                    let qxobj = {};
                                    let qx = res.data.roletop[0].list[0].qx;
                                    qx.forEach((element) => {
                                        qxobj[element.rolekey] = 1;
                                    });
                                    qxobj = JSON.stringify(qxobj);
                                    this.$router.push({
                                        name: res.data.roletop[0].list[0].unique,
                                        query: { qxobj },
                                    });
                                    this.loading = false;
                                })
                                .catch((err) => {
                                    this.$message.warning(err.msg);
                                    this.loading = false;
                                });
                        } else {
                            this.loading = false;
                            return false;
                        }
                    });
                },

         */
    },
};
</script>
<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
    // background: linear-gradient(-90deg, #304156 0%, rgb(250, 250, 248));
    // background-image: url("../../assets/images/login.png");
    // background-repeat: no-repeat;
    // background-position: right top;
    // background-size: cover;
    // background-color: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;

    /deep/ .whitelebel .el-form-item__label {
        color: #304156;
        font-size: 18px;
    }

    /deep/ input {
        // background: rgba($color: #000000, $alpha: 0.3);

        color: #304156;
        // border-color:  #304156;
    }

    .login-model {
        border-radius: 4px;
        background-color: #ffffff;
        box-shadow: 0 0 10px 10px #eeeeee;
        margin-left: 100px;
        padding: 80px 40px;

        >div {
            text-align: center;
        }

        >div:nth-child(1) {
            font-size: 20px;
            font-weight: 800;
            // color: #304156;
            margin-bottom: 20px;
        }

        >div:nth-child(2) {
            color: #999999;
            margin-bottom: 30px;
        }
    }

    .login-image {
        width: 800px;
    }
}
</style>
